<template>
    <div class="f-header">
        <span class="logo">
            <el-icon size="30px" class="mr-3">
                <eleme-filled />
            </el-icon>
            博码固定资产
        </span>
        <div class="">
            <el-tooltip class="box-item" effect="dark" content="收缩" placement="bottom">
                <el-icon @click="$store.commit('handleAsideWidth')" size="20px" class="icon-btn h-[64px] w-[54px]">
                    <fold v-if="$store.state.asideWidth == '250px'"/>
                    <Expand v-else />
                </el-icon>
            </el-tooltip>

            <el-tooltip class="box-item" effect="dark" content="刷新" placement="bottom">
                <el-icon size="20px" class="icon-btn h-[64px] w-[54px] ml-6" @click="handleRefresh">
                    <refresh />
                </el-icon>
            </el-tooltip>

        </div>
        <div class="flex ml-auto mr-8  items-center justify-center">
            <el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom">
                <el-icon class="icon-btn h-[64px] w-[54px] mr-6" @click="toggle" size="20px">
                    <full-screen v-if="!isFullscreen" />
                    <Aim v-else />
                </el-icon>
            </el-tooltip>

            <el-avatar class="right-2 mr-2" :size="30" :src="$store.state.user.avatar" />
            <el-dropdown @command="handleCommand">
                <span class=" text-light-50">
                    {{ $store.state.user.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

    <form-drawer ref="formDrawerRef" @submit="onSubmit" destroyOnClose title="修改密码" size="40%">

        <el-form :rules="rules" ref="formRef" :model="form" label-width="80px" size="small">
            <el-form-item prop="oldpassword" label="旧密码">
                <el-input placeholder="请输入旧密码" v-model="form.oldpassword"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="新密码">
                <el-input type="password" show-password placeholder="请输入新密码" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item prop="repassword" label="确认密码">
                <el-input type="repassword" show-password placeholder="请输入确认密码" v-model="form.repassword"></el-input>
            </el-form-item>
        </el-form>

    </form-drawer>




</template>

<script setup>
import FormDrawer from '~/components/FormDrawer.vue'
import { useFullscreen } from '@vueuse/core'
import { useRepassword, useLogout } from '~/composables/useManager'

const {
    //是否全屏状态
    isFullscreen,
    //切换全屏
    toggle
} = useFullscreen()

const {
    formDrawerRef,
    form,
    rules,
    formRef,
    onSubmit,
    openRePasswordForm
} = useRepassword()

const {
    handleLogout
} = useLogout()

// 下拉事件 修改密码和退出登录
const handleCommand = (command) => {
    switch (command) {
        case "logout":
            handleLogout()
            break;
        case "rePassword":
            openRePasswordForm()
            break;
        default:
            break;
    }
}

// 刷新
function handleRefresh() {
    location.reload()
}



</script>
<style>
.f-header {
    @apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0;
    height: 64px;
}

.logo {
    width: 250px;
    @apply flex justify-center items-center text-xl;

}

.icon-btn {
    cursor: pointer;
}

.icon-btn:hover {
    @apply bg-indigo-600
}
</style>